<template>
	<view class="my-datepicker c999 fs22"  mode="date"   >
		<picker class="start" mode="date" @change="changeStart">
			<view>{{ start?start:'开始日期'}}</view>
		</picker>
		<uni-icons color="#999" class="icon" type="calendar"></uni-icons>
		<picker class="end" mode="date" @change="changeEnd" :start="start">
			<view>{{ end?end:'结束日期'}}</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "my-datepicker",
		props: {
			start:'',
			end:''
		},
		data() {
			return {
				// start:'',
				// end:''
			};
		},
		created(){
			
		},
		methods: {
			changeStart(e){
				// console.log(e);
				// this.start=e.detail.value
				this.$emit('update:start',e.detail.value)
				if(this.end){
					this.$emit('change')
				}
				
			},
			changeEnd(e){
				// this.end=e.detail.value
				this.$emit('update:end',e.detail.value)
				if(this.start){
					this.$emit('change')
				}
			},
		},
	}
</script>

<style lang="less">
	.my-datepicker {
		box-sizing: border-box;
		width: 476.39rpx;
		height: 61.11rpx;
		background: #ffffff;
		border: 1.39rpx solid #d8d8d8;
		border-radius: 31.94rpx;
		position: relative;
		padding: 0 28rpx;
		
		.start,.end{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 180rpx;
			
		}
		.start{
			left: 28rpx;
			text-align: left;
		}
		.end{
			right: 28rpx;
			text-align: right;
		}

		.icon {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			transition: all 0.3s;
		}
	}
</style>